<template>
  <div class="login-container">
    <div class="header">
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
      >
        <el-form-item label="配置名称：">
          <el-input
            v-model="input"
            placeholder="请输入内容"
          />
        </el-form-item>
        <el-form-item label="配置代码：">
          <el-input
            v-model="input1"
            placeholder="请输入内容"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="text"
            icon="el-icon-search"
          >查找</el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            type="text"
            icon="el-icon-close"
          >清空</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="box">
      <el-row>

        <el-col :span="24">
          <el-table
            ref="multipleTable"
            tooltip-effect="dark"
            :data="tableData"
            style="width: 100%"
            :row-class-name="tableRowClassName"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="55"
            />
            <el-table-column
              prop="date"
              label="名称"

              align="center"
            />
            <el-table-column
              prop="name"
              label="代码"

              align="center"
            />
            <el-table-column
              prop="address"
              label="备注说明"
              align="center"
            />
            <el-table-column
              prop="address"
              label="排序"
              align="center"
            />
            <!-- <el-table-column
              fixed="right"
              label="操作"
              width="200"
              align="center"
            >
              <template slot-scope="scope">

              </template>
            </el-table-column> -->
          </el-table>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LoginIndex',
  components: {},
  props: {},
  data() {
    return {
      input: '',
      input1: '',
      formInline: {
        user: '',
        region: ''
      },
      tableData: [
        {
          date: '----',
          name: '----',
          address: '----'
        },
        {
          date: '----',
          name: '----',
          address: '----'
        },
        {
          date: '----',
          name: '----',
          address: '----'
        }
      ]
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    //   表格斑马线颜色
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return 'warning-row'
      } else if (rowIndex % 2 == 1) {
        return 'success-row'
      }
      return ''
    }
  }
}
</script>

<style scoped lang="scss">
.login-container {
  margin-top: 50px;
}
.header {
  box-shadow: 3px 0px 3px #01726e;
  margin-top: 30px;
  padding-left: 30px;
  padding-top: 15px;
  margin-bottom:10px;
}
</style>
<style>
/* 表格斑马线颜色设置 */
.el-table .warning-row {
  background: #f3fdfc;
}

.el-table .success-row {
  background: #fff;
}
</style>

